<template>
	<view class="wrap">
		<text class="tit" v-text="courseName"></text>
		<view class="statistics">
			<text class="blue" v-text="`应到:${detail.shouldArrived}`"></text>
			<text class="blue" v-text="`实到:${detail.actualArrived}`"></text>
		</view>
		<view class="statistics">
			<text class="green" v-text="`请假:${detail.vacationArrived}`"></text>
			<text class="yellow" v-text="`迟到:${detail.lateArrived}`"></text>
			<text class="red" v-text="`未到:${detail.notYetArrived}`"></text>
		</view>
		<view class="detail leave" v-if="detail.vacationArrivedNames">
			<view class="nameList borderBottom"><text v-for="(item, i) in detail.vacationArrivedNames" :key="item" v-text="item"></text></view>
			<view class="status">
				<icon class="iconfont iconziyuan3"></icon>
				<text v-text="time"></text>
				<text v-text="`${detail.vacationArrivedNames.length}人`"></text>
				<text class="leaveSign">请假</text>
			</view>
		</view>
		<view class="detail late" v-if="detail.lateArrivedNames">
			<view class="nameList borderBottom"><text v-for="(item, i) in detail.lateArrivedNames" :key="item" v-text="item"></text></view>
			<view class="status">
				<icon class="iconfont iconziyuan4"></icon>
				<text v-text="time"></text>
				<text v-text="`${detail.lateArrivedNames.length}人`"></text>
				<text class="lateSign">迟到</text>
			</view>
		</view>

		<view class="detail noShow" v-if="detail.notYetArrivedNames">
			<view class="nameList borderBottom"><text v-for="(item, i) in detail.notYetArrivedNames" :key="item" v-text="item"></text></view>
			<view class="status">
				<icon class="iconfont iconziyuan5"></icon>
				<text v-text="time"></text>
				<text v-text="`${detail.notYetArrivedNames.length}人`"></text>
				<text class="noShowSign">未到</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detail: '',
			time: '',
			courseName: ''
		};
	},
	onLoad(option) {
		let id = +option.data;
		this.time = option.time;
		this.courseName = option.courseName;
		this.getRecord(id);
	},
	methods: {
		async getRecord(id) {
			let resp = await this.$http.get({
				url: `/edu/rollCall/statistics/${id}`
			});
			this.detail = resp.result;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 50upx;
}
.statistics {
	display: flex;
	margin-bottom: 26upx;
	text {
		flex: 0 1 33%;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		&::before {
			content: '';
			display: inline-block;
			width: 14upx;
			height: 14upx;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 6upx;
		}
	}
	.blue {
		&::before {
			background: #3c68e5;
		}
	}
	.green {
		&::before {
			background: #3ed392;
		}
	}
	.yellow {
		&::before {
			background: #ffb400;
		}
	}
	.red {
		&::before {
			background: #ff534a;
		}
	}
}
.tit {
	font-size: 36upx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	display: block;
	color: rgba(51, 51, 51, 1);
	padding-bottom: 40upx;
}
.detail {
	width: 650upx;
	height: 195upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.1);
	border-radius: 8upx;
	margin-bottom: 50upx;
	.nameList {
		width: 100%;
		height: 134upx;
		padding: 30upx;
		text {
			margin-right: 20upx;
		}
	}
	.status {
		padding: 0upx 0upx 0upx 30upx;
		line-height: 50upx;
		height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		icon {
			width: 24upx;
			height: 26upx;
			margin: 0 !important;
		}
		text {
			font-size: 26upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-left: 20upx;
			&:last-child {
				margin-left: auto;
				width: 96upx;
				height: 40upx;
				border-top-left-radius: 20upx;
				border-bottom-left-radius: 20upx;
				text-align: center;
				font-size: 26upx;
				line-height: 40upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
		.leaveSign {
			background: rgba(32, 218, 189, 1);
		}
		.lateSign {
			background: rgba(255, 180, 0, 1);
		}
		.noShowSign {
			background: rgba(255, 83, 74, 1);
		}
	}
}
</style>
